<template>
  <div>
    <el-input ref="input" @blur="blurFun" v-model="productName" placeholder="请输入商品名称"></el-input>
  </div>
</template>

<script>
// import {copy} from 'assets/scripts/base/functions'
export default {
  name: 'editProductName',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      productName: ''
    }
  },
  mounted() {
    this.$nextTick(_ => {
      this.$refs.input.focus()
    })
  },
  watch: {
    item: {
      handler(val, oldVal) {
        this.productName = val.pictureName
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    blurFun() {
      console.log()
      if (!this.productName || this.productName.length > 30) {
        this.$message({
          message: '商品名称允许输入1~30个字符！',
          type: 'warning'
        })
        return
      }
      this.$emit('update:analysisData', false)
      this.$emit('update:pictureName', this.productName)
      this.$emit('saveImg', this.item, 'editName')
    }
  }
}
</script>

<style scoped>

</style>
